<template>
<div class="index">
  <div class="main-content">
    <div class="menu-item">
      <router-link to="/main/deviceInfo">
        <div class="container">
          <div class="iconfont">
            <img src="../assets/user.png" alt="">
          </div>
          <div class="name">我的设备</div>
        </div>
      </router-link>
    </div>
    <div class="menu-item">
      <router-link to="/main/jiankong">
        <div class="container">
          <div class="iconfont">
            <img src="../assets/rizhi.png" alt="">
          </div>
          <div class="name">使用日志</div>
        </div>
      </router-link>
    </div>
    <div class="menu-item">
        <router-link to="/main/realtime_camera">
            <div class="container">
                <div class="iconfont">
                    <img src="../assets/camera.png" alt="" width="33px">
                </div>
                <div class="name">实时摄像</div>
            </div>
        </router-link>
    </div>
  </div>
  <div class="main-content">
    <div class="menu-item">
      <router-link to="/main/setting">
        <div class="container">
          <div class="iconfont">
            <img src="../assets/setting.png" alt="">
          </div>
          <div class="name">设备维护</div>
        </div>
      </router-link>


    </div>
    <div class="menu-item">
      <router-link to="/main/bind">
        <div class="container">
          <div class="iconfont">
            <img src="../assets/add.png" alt="">
          </div>
          <div class="name">添加设备</div>
        </div>
      </router-link>

    </div>
    <div class="menu-item" style="visibility: hidden;">
    </div>
  </div>
  <div v-transfer-dom>
    <alert v-model="showFlag" :title="'尚未绑定智能锁'" :content="'跳转到设备绑定界面'" @on-hide="toBind"></alert>
  </div>
</div>
</template>
<script>
import "../iconfont/iconfont.css";
import {
  Alert,
  TransferDomDirective as TransferDom,
  XSwitch
} from "vux";
export default {
  directives: {
    TransferDom
  },
  components: {
    Alert,
    XSwitch
  },
  data() {
    return {
      showFlag: false
    };
  },
  mounted: function() {
    //检测用户是否绑定
    this.binding();
  },
  methods: {
    binding: function() {
      this.$http
        .get("http://iot.malanco.com/myDevice", {
          headers: {
            contentType: "application/json; charset=utf-8"
          },
          responseType: "json"
        })
        .then(response => {
          if (response.data.success == "true") {
            var device = response.data.data;
            if (device != null) {
              if (device.name != null || device.name != "") {
                this.$store.dispatch('changeName', device.name);
              }
              if (
                device == null ||
                device.deviceId == "" ||
                device.deviceId == null
              ) {
                this.showFlag = true;
              }
            } else {
              this.showFlag = true;
            }
          }
        });
    },
    toBind: function() {
      this.$router.push({
        path: "/main/bind"
      });
    }
  }
};
</script>


<style lang="less">
.index {
    .main-content {
        display: flex;
        justify-content: space-between;
        margin-top: 25px;
        padding: 0 30px;
        .menu-item {
            width: 80px;
            height: 80px;
            border-radius: 5px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            .container {
                position: relative;
                div {
                    text-align: center;
                    color: #8dcae2;
                    font-family: "SimHei";
                    font-size: 14px;
                }
                .iconfont {
                    img {
                        width: 30px;
                    }
                }
            }
        }
    }
}
</style>
